{extend name="layout:login" /}
{block name="main_content"}
  <!-- Register form -->
  <form id="model-form" method="post" action="" class="form-horizontal rounded shadow no-overflow">
    <div class="sign-header">
      <div class="form-group">
        <div class="sign-text">
          <span>用户注册</span>
        </div>
      </div>
    </div>
    <div class="sign-body">
      <div class="form-group">
        <div class="input-group input-group-lg rounded no-overflow">
          <input type="text" class="form-control" name="nickname" placeholder="请输入用户昵称" autocomplete="off">
          <span class="input-group-addon"><i class="fa fa-user"></i></span>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group input-group-lg rounded no-overflow">
          <input type="text" name="mobile" id="mobile" placeholder="请输入有效手机号码" class="form-control" value="" autocomplete="off"/>
          <input type="hidden" name="sms_mobile" id="sms_mobile" value=""/>
          <span class="input-group-btn">
            <button type="button" class="btn btn-primary" id="btn-send-code">
              发送验证码<span id="notice-seconds" class="hide">(<span id="left-seconds"></span>秒)</span>
            </button>
          </span>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group input-group-lg rounded no-overflow">
          <input type="hidden" name="sms_code" id="sms_code" value="" autocomplete="off"/>
          <input type="text" name="code" placeholder="请输入短信验证码" class="form-control" value="" required autocomplete="off"/>
          <input type="hidden" name="sms_mobile" id="sms_mobile" value=""/>
          <span class="input-group-addon"><i class="fa fa-mobile"></i></span>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group input-group-lg rounded no-overflow">
          <input type="password" id="password" name="password" class="form-control" placeholder="请输入登录密码">
          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group input-group-lg rounded no-overflow">
          <input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="请再次输入登录密码">
          <span class="input-group-addon"><i class="fa fa-check"></i></span>
        </div>
      </div>
    </div>
    <div class="sign-footer">
      <div class="form-group">
        <button type="submit" class="btn btn-theme btn-lg btn-block no-margin rounded">注册</button>
      </div>
    </div>
  </form>
  <!--/ Register form -->

  <!-- Content text -->
  <p class="text-muted text-center sign-link">已有帐号<a href="{:url('login/login')}"> 立即登录</a></p>
  <!--/ Content text -->
{/block}
{block name="page_js"}
  <script src="{$site_root}/static/plugins/jquery-validate/jquery.validate.min.js"></script>
  <script src="{$site_root}/static/plugins/jquery-validate/bootstrap.validate.js"></script>
  <script type="text/javascript">
    $("form#model-form").validate({
      ignore: "",
      rules:{
        "sms_mobile":{
          required: true,
          min: 13000000000,
          max: 19900000000,
          remote: {
            url: "{:url('ajax_check_unique')}",
            type: "post",
            data: {
              field: "mobile",
              id: 0,
              mobile: function(){
                return $("input#mobile").val();
              }
            }
          }
        },"code":{
          required: true,
          equalTo: "#sms_code"
        },"nickname":{
          required: true,
          minlength: 3,
          maxlength: 30
        },"password":{
          required: true,
          minlength: 6,
          maxlength: 20
        },"confirm_password":{
          required: true,
          equalTo: "#password"
        }
      },
      messages:{
        "nickname":{
          required: "请输入用户昵称",
          minlength: "用户昵称长度必须在3-30之间",
          maxlength: "用户昵称长度必须在3-30之间"
        },"sms_mobile":{
          required: "请输入有效手机号码",
          min: "用户手机号码不正确",
          max: "用户手机号码不正确",
          remote: "该手机号码已注册，请登录"
        },"code":{
          required: "请输入短信验证码",
          equalTo: "短信验证码不正确"
        },"password":{
          required: "请输入登录密码",
          minlength: "登录密码长度必须在6-20之间",
          maxlength: "登录密码长度必须在6-20之间"
        },"confirm_password":{
          required: "请再次输入登录密码",
          equalTo: "两次输入的密码一致"
        }
      },
      highlight:function(element) {
        $(element).parents('.form-group').addClass('has-error has-feedback');
      },
      unhighlight: function(element) {
        $(element).parents('.form-group').removeClass('has-error');
      },
      submitHandler: function(form){
        var $form = $(form);
        $.ajax({
          url: $form.attr("action"),
          type: $form.attr("method"),
          dataType: "JSON",
          data: $form.serialize(),
          success: function(data){
            if(data.code){
              location.href = data["url"];
            }else{
              alert(data["msg"]);
            }
          }, error: function () {
            alert("数据执行错误！");
          }
        });
      }
    });

    var default_wait = 60;
    var wait = default_wait;
    function time(){
      var $sendBtn = $("#btn-send-code");
      var $spanNotice = $sendBtn.find("#notice-seconds");
      var $spanSecond = $sendBtn.find("#left-seconds");
      if(wait == 0) {
        $sendBtn.removeClass("btn-default").addClass("btn-primary").removeAttr("disabled", "disabled");;
        $spanNotice.addClass("hide");
        wait = default_wait;
      }else{
        if($spanNotice.hasClass("hide")){
          $sendBtn.removeClass("btn-primary").addClass("btn-default").attr("disabled", "disabled");
          $spanNotice.removeClass("hide");
        }
        $spanSecond.html(wait);
        wait--;
        setTimeout(function(){
          time()
        },
        1000);
      }
    }


    jQuery(function($){
      $("input#mobile").blur(function(){
        $("input#sms_mobile").val($(this).val());
      });

      $("#btn-send-code").click(function(){
        var $btnCurrent = $(this);
        var inputMobile = $("input#mobile");
        if(!inputMobile.length || !inputMobile.val().length){
          alert("请输入您的手机号码");
          return false;
        }
        var mobile = parseInt(inputMobile.val())
        if(mobile < 13000000000 || mobile > 19900000000){
          alert("请输入您的手机号码");
          return false;
        }
        if($btnCurrent.hasClass("btn-primary")){
          $.ajax({
            url: "{:url('sms_code')}",
            type: "POST",
            dataType: "JSON",
            data: {"mobile": mobile},
            success: function(res){
              if(res["status"]){
                var response_data = res["data"]
                $("#sms_code").val(response_data["code"]);
                wait = default_wait;
                time();
              }else{
                alert(res["msg"]);
              }
            }, error: function () {
              alert("数据执行错误！");
            }
          });
        }
      });
    });
  </script>
{/block}